<template>
    <div class="warpper-box">
      <div class="inner_box">
       <el-row :gutter="20">
        <el-col :span="6" style="border: 1px solid #EBEEF4;">
          <div style="display: flex;margin-bottom:10px;border-bottom: 1px solid #EBEEF4;padding: 0 10px;background: #fafafa;margin-left: -10px;margin-right: -10px;">
            <label style="flex: 1;line-height: 40px;">部门列表</label>
            <el-button type="text" @click="add(true)" style="font-size: 20px;" icon="el-icon-circle-plus"></el-button>
          </div>
          <el-tree
          :data="treeData"
          node-key="id"
          @node-click="handleNodeClick"
          default-expand-all
          :expand-on-click-node="false">
            <span slot-scope="{ node,data }" class="custom-tree-node">
              <span style="margin-right:20px;">{{ data.name }}</span>
              <el-button type="text" size="mini" @click.stop="append(data,node)">添加</el-button>
              <el-button type="text" size="mini" @click.stop="treeEdit(data,node)">修改</el-button>
              <el-button type="text" size="mini" @click.stop="treeDel(data,node)">删除</el-button>
            </span>
          </el-tree>
          
        </el-col>
        <el-col :span="18">
          <system-list
            :key="keys"
            :tableData="tables.tableData" 
            :tableLabel="tables.tableLabel" 
            :models="tables" 
            @on-search-click="loadList"
            @on-edit-click="add"
            @on-del-click="treeDel"
            />
        </el-col>
       </el-row>

       <el-dialog :title="form.title" :visible.sync="form.visible" :width="form.width" :close-on-click-modal="false">
        <form-create 
        v-model="form.fApi" 
        :rule="form.rule" 
        :option="form.option"/>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="form.visible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="onFormSubmit">保存</el-button>
        </div>
      </el-dialog>

      </div>
    </div>
  </template>
  
  <script>
    import store from '@/store'
  import {DEPARTMENT_FORM,DEPARTMENT_LABEL,OPTION_BLOCK} from "./systemUser/system_form"
  import SystemList from "./systemUser/system_list"
  import { getDepartmentList,delDepartment,saveDepartment } from "@/api/system_api"
  export default {
    components:{
      SystemList
    },
    data() {
      return {
        keys:1,
        tables:{
          total:0,
          width:'160',
          tableData:[],
          tableLabel: DEPARTMENT_LABEL
        },
        form:{
          id:'',
          pid:'',
          title:'新增',
          width:"1000px",
          visible:false,
          fApi:{},
          rule:[],
          option:OPTION_BLOCK
        },
        page:{
          pageNum:1,
          pageSize:10,
        },
        treeData:[]
      };
    },
    mounted() {
      this.loadList(true);
      this.loadTree();
    },
    methods: {
      async loadList(formData) {
        let params = {};
        if(formData !== undefined && formData.type === 'page'){
          this.page.pageNum = formData.page;
          this.page.pageSize = formData.pageSize;
        }
        if(formData===true){
          this.page.pageNum = 1;
          this.keys++
        }
        params.pid = this.form.pid;
        params.pageNum = this.page.pageNum;
        params.pageSize = this.page.pageSize;
        const req = await getDepartmentList(params);
        this.tables.tableData = req.data.list;
        this.tables.tableData.forEach(v=>{
          v.edit=true;v.del=true;
        })
        this.tables.total = req.data.total;
      
      },
      async loadTree(){
        this.treeData = await store.dispatch('user/getAllDepartment');
      },
      handleNodeClick(data,node,el){
        this.form.pid = data.id;
        this.form.id = '';
        this.loadList(true);
        this.loadTree();
      },
      append(data,node){
        this.form.rule = DEPARTMENT_FORM;
        this.form.title = "新增子级";
        this.form.id = "";
        this.form.pid = data.id;
        this.form.visible = true;
        this.$nextTick(()=>{
            this.form.fApi.resetFields();
        })
      },
      treeEdit(data,node){
        this.form.rule = DEPARTMENT_FORM;
        this.form.visible = true;
        this.$nextTick(()=>{
          this.form.title = "编辑";
          this.form.id = data.id;
          this.form.pid = '';
          this.form.fApi.setValue({
            "name":data.name,
            "unitName":data.unitName,
            "unitPhone":data.unitPhone,
            "email":data.email,
            "concatPhone":data.concatPhone,
            "address":data.address,
            "remarks":data.remarks
          })
        })
      },
      treeDel(data,node){
        this.$confirm("确认删除", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
          await delDepartment(data.id);
          this.$message.success("删除成功");
          this.loadList(true);
          this.loadTree();
        }).catch(() => {});
      },
      add(row){
        this.form.rule = DEPARTMENT_FORM;
        this.$nextTick(()=>{
          if(row === true){
            this.form.title = "新增";
            this.form.id = "";
            this.form.pid = 0;
            this.form.fApi.resetFields();
          }else{
            this.form.title = "编辑";
            this.form.id = row.id;
            this.form.pid = '';
            this.form.fApi.setValue({
              "name":row.name,
              "unitName":row.unitName,
              "unitPhone":row.unitPhone,
              "email":row.email,
              "concatPhone":row.concatPhone,
              "address":row.address,
              "remarks":row.remarks
            })
          }
        })
        this.form.visible = true;
      },
      async onFormSubmit() {
        this.form.fApi.submit(async (formData, $f) => {
          try {
            let text = "新增成功";
            if(this.form.id){
              formData.id = this.form.id;
              text = "修改成功"
            }
            formData.pid = this.form.pid;
            await saveDepartment(formData);
            this.$message.success(text);
            this.form.visible = false;
            this.form.pid = '';
            this.loadList(true);
            this.loadTree();
            this.form.fApi.resetFields()
          } catch (error) {
            //this.$message.info(JSON.stringify(error));
          }
        });
      }
    }
  };
  </script>